import { computed, h, defineComponent, PropType } from 'vue';
import { calculateX, calculateY } from '../composables/useConvertMap';
import { useTooltipInjector } from '../composables/useTooltip';
import { getBezierPoint } from '../helpers';
import planeIcon from '../assets/images/plane.png';
import planeIcon2 from '../assets/images/plane-1.png';
import destIcon from '../assets/images/chart-icon1.png';
const DefaultCoords = {
  PVG: [121.47, 31],
  SHA: [120.47, 31.2],
};

export default defineComponent({
  name: 'PathTemplate',
  props: {
    coordinates: {
      type: Array as PropType<number[]>,
      default: () => [0, 0],
    },
    airbus: Boolean,
    pvg: Boolean,
    entryExit: Number,
    portName: String,
    scale: {
      type: Number,
      default: 1,
    },
    strokeWidth: {
      type: Number,
      default: 0.4,
    },
  },
  setup(props) {
    const computedPath = computed(() => {
      let d = 'M ',
        entryPoints = props.pvg ? DefaultCoords.PVG : DefaultCoords.SHA,
        exitPoint = props.coordinates;
      if (props.entryExit === 0) {
        [entryPoints, exitPoint] = [exitPoint, entryPoints];
      }
      let x1 = calculateX(entryPoints[0]),
        x2 = calculateX(exitPoint[0]),
        y1 = calculateY(entryPoints[1]),
        y2 = calculateY(exitPoint[1]),
        p = getBezierPoint([x1, y1], [x2, y2]);
      d += `${x1} ${y1} Q ${p[0]} ${p[1]}, ${x2} ${y2}`;
      if (props.entryExit && props.entryExit > 1) {
        d += ` Q ${p[0]} ${p[1]}, ${x1} ${y1} Z`;
      }
      return d;
    });
    const { state: tooltipState } = useTooltipInjector();
    return {
      computedPath,
      tooltipState,
    };
  },
  mounted() {},
  methods: {
    genContent() {
      let scale = 1 / this.scale,
        strokeWidth = scale * this.strokeWidth;
      return h('path', {
        stroke: !this.pvg ? 'var(--light-yellow)' : 'var(--light-blue)',
        'stroke-width': strokeWidth,
        fill: 'transparent',
        opacity: 0.6,
        d: this.computedPath,
      });
    },
    genPlane() {
      let scale = 1 / this.scale,
        translateSize = -1 * scale * 6;
      return h(
        'image',
        {
          width: '12px',
          height: '12px',
          'xlink:href': this.airbus ? planeIcon : planeIcon2,
          style: {
            transform: `rotateY(180deg) rotateZ(-90deg) translate(${translateSize}px, ${translateSize}px) scale(${scale})`,
          },
        },
        this.genAnimate()
      );
    },
    genDestPoint() {
      let scale = 1 / this.scale,
        translateSize = scale * 6;
      let x = calculateX(this.coordinates[0]),
        y = calculateY(this.coordinates[1]);
      return h('image', {
        width: `${translateSize * 2}px`,
        height: `${translateSize * 2}px`,
        x: x,
        y: y,
        ref: 'destPoint',
        'xlink:href': destIcon,
        style: {
          transform: `translate(-${translateSize}px, -${translateSize}px)`,
          cursor: 'pointer',
          'z-index': 1,
        },
        onMouseenter: ($event: MouseEvent) => {
          this.tooltipState.showTooltip = true;
          this.tooltipState.text = this.portName || '';
          this.tooltipState.clientX = $event.clientX;
          this.tooltipState.clientY = $event.clientY;
        },
        onMouseleave: () => {
          this.tooltipState.showTooltip = false;
        },
      });
    },
    genAnimate() {
      return h('animateMotion', {
        path: this.computedPath,
        dur: `${Math.round(20 + Math.random() * 10)}s`,
        repeatCount: 'indefinite',
        rotate: 'auto',
      });
    },
  },
  render() {
    return h('g', {}, [
      this.genContent(),
      this.genPlane(),
      this.genDestPoint(),
    ]);
  },
});
